<template>
  <div class="investigate" @click="guanbi">
    <!-- 内容 -->
    <div class="title">{{ datas.title }}</div>
    <div
        class="rescon"
        v-for="(item1, index1) in datas.jsonData"
        :key="index1"
        @mouseleave="leave()"
    >
      <!-- 输入框 -->
      <div v-if="item1.type === 0">
        <van-cell-group>
          <van-field
              :label="item1.name"
              :placeholder="item1.value"
              :value="item1.value"
              readonly="readonly"
          />
        </van-cell-group>
      </div>

      <!-- 下拉框 -->
      <div v-if="item1.type === 1" class="xiala">
        <el-select v-model="item1.value3[0]" placeholder="请选择">
          <el-option
              v-for="item in item1.value1"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </div>

      <!-- 单选框 -->
      <van-field name="radio" :label="item1.name" v-if="item1.type === 2">
        <template #input>
          <van-radio-group v-model="item1.value3[0]" direction="horizontal">
            <div v-for="(item, index) in item1.value1" class="runs-paginator-flex-container">
              <van-radio
                  :name="item"
                  :key="index"
                  style="margin-right: 3px"
              >{{ item }}
              </van-radio>
              <el-link icon="el-icon-edit-outline" style="font-size: xx-small"
                       @click="clickEvent(datas.title,item,index+1, index1,item1)"/>
            </div>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 复选框 -->
      <van-field
          name="checkboxGroup"
          :label="item1.name"
          v-if="item1.type === 3"
      >
        <template #input>
          <van-checkbox-group v-model="item1.value3" direction="horizontal">
            <div v-for="(item, index) in item1.value1" class="runs-paginator-flex-container">
              <van-checkbox
                  style="margin-right: 3px"
                  :name="item"
                  :key="index"
                  :shape="item1.name"
              >{{ item }}
              </van-checkbox>
              <el-link icon="el-icon-edit-outline" style="font-size: xx-small;margin-right: 20px"
                       @click="clickEvent(datas.title, item,index+1, index1,item1)"></el-link>
            </div>
          </van-checkbox-group>
        </template>
      </van-field>

      <!-- 滑动条 -->
      <div v-if="item1.type === 4" class="xiala">
        <div class="slider">
          <van-slider
              v-if="item1.value1.length===3 && item1.value1[0]!==''
              && item1.value1[1]!==''&& item1.value1[2]!==''"
              :min="item1.value1[0]"
              :max="item1.value1[1]"
              v-model="item1.value1[2]"
              disabled>
            <div
                slot="button"
                class="custom-button">
              <van-button type="info" square size="mini">
                {{ item1.value1[2] + item1.value2 }}
              </van-button>
            </div>
          </van-slider>
        </div>
      </div>

      <!-- 滑动条(带开关) -->
      <div v-if="item1.type === 5" class="xiala">
        <div class="runs-paginator-flex-container" >
          <div style="width: 20%">
            <el-switch
                v-model="item1.value3[0]"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </div>
          <div  style="width: 100%; margin-top: 10px; margin-right: 5px">
            <van-slider
                v-if="item1.value1.length===3 && item1.value1[0]!==''
              && item1.value1[1]!==''&& item1.value1[2]!==''"
                :min="item1.value1[0]"
                :max="item1.value1[1]"
                v-model="item1.value1[2]"
                disabled>
              <div
                  slot="button"
                  class="custom-button">
                <van-button type="info" square size="mini">
                  {{ item1.value1[2] + item1.value2 }}
                </van-button>
              </div>
            </van-slider>
          </div>
        </div>
      </div>

    </div>

    <el-dialog
        :title="showTile"
        :visible.sync="dialogVisible"
        width="65%">
      <el-row :gutter="20" style="margin-bottom: 20px"
              v-if="showAllData.showType===3"
      >
        <el-col :span="6">触发时机:</el-col>
        <el-col :span="12">
          <!-- 组件为复选框时显示选择框 -->
          <el-switch
              @change="changeSelect()"
              v-model="selectOrNot"
              active-text="选择时"
              inactive-text="不选择时">
          </el-switch>
        </el-col>
      </el-row>
      <el-table
          :data="showAllData.showData"
          style="width: 100%"
          height="450"
      >
        <el-table-column
            prop="key"
            label="组件"
            width="180">
        </el-table-column>

        <el-table-column
            prop="value"
            label="是否可选"
            width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.enabled" placeholder="请选择" clearable>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="value"
            label="是否可点击"
            width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.touch" placeholder="请选择" clearable>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="value"
            label="是否选中"
            width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.checked" placeholder="请选择" clearable>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="value"
            label="是否可见"
            width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.visible" placeholder="请选择" clearable>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeEvent()">确 定</el-button>
  </span>
    </el-dialog>
    <!-- 删除组件 -->
    <slot name="deles"/>
  </div>
</template>

<script>
import row from "element-ui/packages/row";

export default {
  name: 'investigate',
  computed: {
    row() {
      return row
    }
  },
  data() {
    return {
      item1: Object,
      radioValue: 0,
      jsonData: [],
      value: 0,
      dialogVisible: false,
      selectOrNot: false,
      showAllData: {
        showName: "",
        showNameValue: Object,
        showFormName: "",
        showData: [],
        showType: 0,
      },
      showTile: "",
      options: [
        {
          value: true,
          label: "是"
        },
        {
          value: false,
          label: "否"
        },
      ],
      selectData: [
        {
          value: true,
          label: "选择"
        },
        {
          value: false,
          label: "不选择"
        },
      ],
    }
  },
  props: {
    datas: Object,
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 复选框点击切换 "选择时"与"不选择时"触发
    changeSelect() {
      this.clickEvent()
    },
    // 点击确定修改事件
    changeEvent() {
      const showData = this.showAllData.showData
      // 获取当前界面的选择信息
      const propsMap = new Map()
      for (let i = 0; i < showData.length; i++) {
        if ((showData[i].enabled === undefined || showData[i].enabled === "")
            && (showData[i].touch === undefined || showData[i].touch === "")
            && (showData[i].checked === undefined || showData[i].checked === "")
            && (showData[i].visible === undefined || showData[i].visible === "")
        ) {
          continue
        }
        let tempProps = []
        if (propsMap.has(showData[i].form_name)) {
          tempProps = propsMap.get(showData[i].form_name)
        }
        const addData = {}
        addData.name = showData[i].key
        addData.type = showData[i].type
        if (showData[i].enabled !== "") {
          addData.enabled = showData[i].enabled
        }
        if (showData[i].touch !== "") {
          addData.touch = showData[i].touch
        }
        if (showData[i].checked !== "") {
          addData.checked = showData[i].checked
        }
        if (showData[i].visible !== "") {
          addData.visible = showData[i].visible
        }
        tempProps.push(addData)
        propsMap.set(showData[i].form_name, tempProps)
      }
      if (propsMap.length <= 0) {
        this.$message.info("无绑定事件")
        return
      }
      let componentValue
      if (this.showAllData.showType === 3) {
        componentValue = this.selectOrNot
      } else if (this.showAllData.showType === 2) {
        componentValue = this.radioValue
      }
      const tempRelation = []
      if (this.item1.relation !== undefined) {
        for (let i = 0; i < this.item1.relation.length; i++) {
          // 复选框
          if (this.showAllData.showType === 3) {
            if (this.item1.relation[i].name !== this.showAllData.showName
                || this.item1.relation[i].name_value !== componentValue
            ) {
              for (let j = 0; j < this.item1.value1.length; j++) {
                if (this.item1.value1[j] === this.item1.relation[i].name) {
                  tempRelation.push(this.item1.relation[i])
                  break
                }
              }
            }
          } else if (this.showAllData.showType === 2) {
            // 单选框
            if (this.item1.relation[i].name !== this.showAllData.showName) {
              for (let j = 0; j < this.item1.value1.length; j++) {
                if (this.item1.value1[j] === this.item1.relation[i].name) {
                  tempRelation.push(this.item1.relation[i])
                  break
                }
              }
            }
          }
        }
      }
      this.item1.relation = []
      propsMap.forEach((value, key) => {
        const relationTempData = {}
        relationTempData.name = this.showAllData.showName
        relationTempData.name_value = componentValue
        relationTempData.form_name = key
        relationTempData.props = value
        this.item1.relation.push(relationTempData)
      })
      for (let i = 0; i < tempRelation.length; i++) {
        this.item1.relation.push(tempRelation[i])
      }
      this.$message.success("事件绑定成功")
    },
    // 点击绑定事件按钮，弹出框数据渲染
    clickEvent(name, data, radioValue, index, item1) {
      this.dialogVisible = true
      this.radioValue = radioValue
      this.showAllData.showData = []
      if (item1 !== undefined) {
        this.item1 = item1
        this.showAllData.showType = item1.type
      }
      if (data !== undefined) {
        this.showAllData.showName = data
      }
      if (name !== undefined) {
        this.showAllData.showFormName = name
      }
      if (this.selectOrNot === undefined) {
        this.selectOrNot = true
      }
      this.showTile = "点击“" + this.showAllData.showName + "”触发的事件"
      const relation = this.item1.relation
      // 获取该组件与其他组件的绑定事件
      for (let i = 0; i < this.$store.state.allComponent.length; i++) {
        if (this.showAllData.showName === this.$store.state.allComponent[i].name) {
          continue
        }
        const temp = {}
        temp.key = this.$store.state.allComponent[i].name
        temp.type = this.$store.state.allComponent[i].type
        temp.form_name = this.$store.state.allComponent[i].form_name
        if (relation !== undefined) {
          for (let j = 0; j < relation.length; j++) {
            if (relation[j].name !== this.showAllData.showName) {
              continue
            }
            if (this.item1.type === 3) {
              // 复选框数据 渲染
              if (relation[j].name_value !== this.selectOrNot) {
                continue
              }
            } else if (this.item1.type === 2) {
              // 单选框值
              if (relation[j].name_value !== this.radioValue) {
                continue
              }
            }
            const props = relation[j].props
            for (let k = 0; k < props.length; k++) {
              if (props[k].name !== this.$store.state.allComponent[i].name) {
                continue
              }
              temp.enabled = props[k].enabled
              temp.touch = props[k].touch
              temp.checked = props[k].checked
              temp.visible = props[k].visible
              break
            }
          }
        }
        this.showAllData.showData.push(temp)
      }
    },
    //点击显示下拉框
    showpic(index1) {
      event.stopPropagation()
      this.datas.jsonData.forEach((el) => {
        el.showPicker = false
      })
      this.datas.jsonData[index1].showPicker = !this.datas.jsonData[index1]
          .showPicker
    },

    // 下拉选择
    xuanze(index1) {
      this.datas.jsonData[index1].showPicker = false
    },

    //关闭下拉选项
    guanbi() {
      this.datas.jsonData.forEach((el) => {
        el.showPicker = false
      })
    },
    leave() {
      this.datas.jsonData.forEach((el) => {
        el.showPicker = false
      })
    },
  },
  watch: {},
}
</script>

<style scoped lang="less">
.investigate {
  position: relative;
  padding: 0 6px;
}

form select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.xiala {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  // overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;

  .titlename {
    width: 5.6em;
    margin-right: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.slider {
  width: 100%;
  margin: 10px 0;
}

.select {
  border: none;
  outline: none;
}

.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}

/deep/ .van-cell {
  display: block;
}

/deep/ .el-form-item__label {
  text-align: center;
  width: 100% !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/deep/ .el-form-item__content {
  margin-left: 100% !important;
}

/* 上传图片按钮 */
.uploadImg {
  width: 200px;
  height: 40px;
  margin-top: 20px;
}

/deep/ .van-radio,
.van-checkbox {
  padding: 4px 0px;
}

/deep/ .van-field__label {
  width: 100%;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  padding-left: 10px;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
  line-height: 20px;
  font-size: 13px;
}

/deep/ .van-field__value {
  padding-left: 10px;
  font-size: 13px;
  padding-top: 5px;
}

.button {
  padding: 12px 24px;

  button {
    width: 100%;
    background: rgb(48, 116, 243);
    color: #fff;
    padding: 8px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    border: none;
  }
}

.select {
  position: relative;
  width: 100%;

  .readinput {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    cursor: default;
  }
}

.ultext {
  display: none;
  height: 0;
  overflow: hidden;
  transition: all linear 1s;
  background: #fff;
  z-index: 100;
  border-radius: 6px;
  box-shadow: 0 0 16px 1px rgba(200, 200, 200, 0.5);

  li {
    padding: 4px 16px;
    border-bottom: 1px solid #eeeeee;

    &:hover {
      background: #c3d4f5;
    }
  }
}

.ulshow {
  display: block;
  height: auto;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 6px;
  position: absolute;
}

.runs-paginator-flex-container {
  flex: 1 1 auto;
  display: flex;
}
</style>
